<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="cu-form-group">
			<view class="title">发票类型</view>
			<picker @change="typeChange"  :range="typeList">
				<view class="picker">
					<text  v-if="fapiaoData.type > -1">{{typeList[fapiaoData.type]}}</text>
					<text class="wanl-gray-light" v-else>选择发票类型</text>
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">发票类型</view>
			<!-- <view class="">
						<radio-group @change="chang">
							<label v-for="item in radioGroup" :key="item">
								<radio :value="item" :checked="item==activeRadio" />{{item}}
							</label>
						</radio-group>
					</view> -->
			
			<radio-group @change="radioChange" class="value checked" color="red" style="font-size: 13px;">
				<label class="radio" style="margin-left: -5%;">
					<radio style="zoom: 0.8;" color="red" value="1" :checked="fapiaoData.header_type == '1'" />个人  
				</label>
				<label class="radio" style="margin-left: 0%;">
				    <radio style="zoom: 0.8;" color="red" value="2" :checked="fapiaoData.header_type == '2'" /> 单位
				</label>
			</radio-group>
			
		</view>
		<view class="cu-form-group" v-show="geren">
			<view class="title">个人姓名</view>
			<input type="text" placeholder="请填写个人姓名" v-model="fapiaoData.name"></input>
		</view>
		<view class="cu-form-group" v-show="com">
			<view class="title">单位名称</view>
			<input type="text" placeholder="请填写单位名称" v-model="fapiaoData.name"></input>
		</view>
		<view class="cu-form-group" v-show="com">
			<view class="title">纳税人识别号</view>
			<input type="text" placeholder="纳税人识别号" v-model="fapiaoData.no"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">发票内容</view>
			<input type="text" placeholder="发票内容" v-model="fapiaoData.content"></input>
		</view>
		
		<view class="cu-form-group">
			<view class="title">收票人手机号</view>
			<input type="number" placeholder="收票人手机号" maxlength="11" v-model="fapiaoData.mobile"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">收票人邮箱</view>
			<input type="text" placeholder="收票人邮箱" v-model="fapiaoData.email"></input>
		</view>
		
		
		<!-- 1.0.5升级 -->
		<!-- 1.0.6升级 -->
		<view class="padding-bj flex flex-direction margin-top">
			<button @tap="confirm" class="cu-btn wanl-bg-orange lg">完成</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fapiaoData: {
					order_id: 0,
					header_type:1,
					type:0,
					name: '',
					mobile: '',
					email: '',
					content: '',
					no: '',
				},
				typeList: ['电子普通发票', '专用发票'],
				geren:true,
				com:false
			}
		},
		onLoad(option) {
			let title = '开发票 ';
			// let params = this.$route.query;
			this.fapiaoData.order_id = option.order_id;
			this.$wanlshop.title(title);
		},
		onNavigationBarButtonTap() {
			this.confirm()
		},
		methods: {
			
			radioChange(e){
				this.fapiaoData.header_type = e.mp.detail.value;
				if(this.fapiaoData.header_type == 1){
					this.com = false;
					this.geren = true;
				}else{
					this.com = true;
					this.geren = false;
				}
			},
			typeChange(e) {
				this.fapiaoData.type = e.detail.value
			},
	
			//提交
			confirm() {
				let data = this.fapiaoData;
				if (!data.name) {
					this.$wanlshop.msg('请填写名称');
					return;
				}
				if (!/^1[0-9]{10,10}$/.test(data.mobile)) { // 1.0.2升级
					this.$wanlshop.msg('请输入正确的手机号码');
					return;
				}
				
				uni.request({
					url: '/wanlshop/order/add_fapiao',
					method: 'POST',
					data: data,
					success: res => {
						// this.$store.commit('statistics/order', {
						// 	customer: this.$store.state.statistics.order.customer + 1
						// });
						this.$wanlshop.msg('申请成功');
						// this.$wanlshop.to(`/pages/user/order/details?id=${this.fapiaoData.order_id}`);
						uni.navigateBack({
								delta:1,//返回层数，2则上上页
							})
					},
					fail: error =>{
						this.$wanlshop.msg(JSON.parse(error.data).msg);
					}
				});
			}
		}
	}
</script>

<style>
	.uni-input-placeholder{
		text-align: right;
		
	}
	input{
		/* direction: rtl; */
	}
	.cu-form-group {
		padding: 0 25rpx;
	}
	/* 1.1.5升级 */
	.cu-form-group.area{
		position: relative;
	}
	.cu-form-group.area .click{
		position: absolute;
		z-index: 99;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
	}
	.cu-form-group .title {
		min-width: calc(4em + 15px);
		font-size: 26rpx;
	}

	.cu-form-group input,
	.cu-form-group textarea {
		font-size: 26rpx;
	}

	.cu-btn.lg {
		font-size: 32rpx;
		height: 86rpx;
	}

	.tipsScroll {
		width: 100%;
		height: 500rpx;
		padding: 0 50rpx;
	}

	.tipsScroll .item {
		margin: 25rpx 0;
	}

	.tipsScroll .item view {
		color: #B8B8B8;
		font-size: 22rpx;
	}

	.tipsScroll .item text {
		color: #333;
	}
</style>
